<template>
  <view class="member-container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar
          placeholder="请输入手机号或会员姓名"
          :clearButton="true"
          :cancelButton="true"
          v-model="searchKeyword"
          @confirm="handleSearch"
          @input="handleInput"
          @cancel="handleCancel"
      />
    </view>

    <!-- 会员列表 -->
    <view class="member-list">
      <uni-list>
        <uni-list-item
            v-for="member in filteredMembers"
            :key="member.id"
            :title="member.name"
            :note="member.phone"
            :thumb="member.avatar || '/static/logo.png'"
            thumbSize="lg"
            :showArrow="true"
            :clickable="true"
            @click="viewMemberDetail(member)"
        >
          <template v-slot:footer>
            <view class="member-info">
              <text class="level">等级: {{member.level}}</text>
              <text class="points">积分: {{member.points}}</text>
              <text class="balance">余额: ¥{{member.balance}}</text>
            </view>
          </template>
        </uni-list-item>
      </uni-list>

      <!-- 空状态 -->
      <view v-if="filteredMembers.length === 0" class="empty-state">
        <uni-icons type="info" size="48" color="#ccc" />
        <text class="empty-text">暂无会员数据</text>
        <text class="empty-subtext">点击下方按钮添加会员</text>
      </view>
    </view>

    <!-- 会员详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-content" v-if="selectedMember">
        <view class="detail-header">
          <image :src="selectedMember.avatar || '/static/logo.png'" class="detail-avatar" />
          <text class="detail-name">{{selectedMember.name}}</text>
        </view>

        <view class="detail-info">
          <view class="info-item">
            <text class="label">手机号:</text>
            <text class="value">{{selectedMember.phone}}</text>
          </view>
          <view class="info-item">
            <text class="label">会员等级:</text>
            <text class="value">{{selectedMember.level}}</text>
          </view>
          <view class="info-item">
            <text class="label">积分:</text>
            <text class="value">{{selectedMember.points}}</text>
          </view>
          <view class="info-item">
            <text class="label">账户余额:</text>
            <text class="value">¥{{selectedMember.balance}}</text>
          </view>
          <view class="info-item">
            <text class="label">注册时间:</text>
            <text class="value">{{selectedMember.registerTime}}</text>
          </view>
        </view>

        <view class="detail-actions">
          <button class="action-btn" @click="closeDetail">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 新增会员弹窗 -->
    <uni-popup ref="addPopup" type="center">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">新增会员</text>
          <uni-icons type="close" size="24" @click="closeAddPopup" />
        </view>

        <view class="form-container">
          <view class="form-item">
            <text class="label">会员姓名</text>
            <input class="input" v-model="newMember.name" placeholder="请输入会员姓名" />
          </view>

          <view class="form-item">
            <text class="label">手机号码</text>
            <input class="input" v-model="newMember.phone" type="number" placeholder="请输入手机号码" />
          </view>

          <view class="form-item">
            <text class="label">会员等级</text>
            <picker class="picker" :range="levelOptions" @change="onLevelChange">
              <view class="picker-value">
                {{ newMember.level || '请选择会员等级' }}
              </view>
            </picker>
          </view>

          <view class="form-item">
            <text class="label">初始积分</text>
            <input class="input" v-model="newMember.points" type="number" placeholder="请输入初始积分" />
          </view>

          <view class="form-item">
            <text class="label">初始余额</text>
            <input class="input" v-model="newMember.balance" type="number" placeholder="请输入初始余额" />
          </view>
        </view>

        <view class="popup-actions">
          <button class="btn-cancel" @click="closeAddPopup">取消</button>
          <button class="btn-confirm" @click="saveMember">保存</button>
        </view>
      </view>
    </uni-popup>

    <!-- 悬浮新增按钮 -->
    <uni-fab
        :pattern="fabPattern"
        horizontal="right"
        vertical="bottom"
        :content="fabContent"
        @trigger="onFabTrigger"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '',
      selectedMember: null,
      newMember: {
        name: '',
        phone: '',
        level: '',
        points: 0,
        balance: 0
      },
      levelOptions: ['普通会员', '白银会员', '黄金会员', '白金会员', '钻石会员'],
      fabPattern: {
        color: '#fff',
        backgroundColor: '#007AFF',
        selectedColor: '#007AFF',
        buttonColor: '#007AFF'
      },
      fabContent: [
        {
          text: '新增会员',
          iconPath: '/static/icons/add.png',
          selectedIconPath: '/static/icons/add-active.png'
        }
      ],
      members: [
        {
          id: 1,
          name: '张三',
          phone: '13800138000',
          avatar: '/static/c1.png',
          level: '黄金会员',
          points: 1500,
          balance: 888.50,
          registerTime: '2023-01-15'
        },
        {
          id: 2,
          name: '李四',
          phone: '13900139000',
          avatar: '/static/c2.png',
          level: '白金会员',
          points: 2800,
          balance: 1520.00,
          registerTime: '2023-03-20'
        },
        {
          id: 3,
          name: '王五',
          phone: '13700137000',
          avatar: '/static/c3.png',
          level: '钻石会员',
          points: 5000,
          balance: 3200.80,
          registerTime: '2023-05-10'
        }
      ]
    }
  },
  computed: {
    filteredMembers() {
      if (!this.searchKeyword) {
        return this.members
      }
      const keyword = this.searchKeyword.toLowerCase()
      return this.members.filter(member =>
          member.phone.includes(keyword) ||
          member.name.toLowerCase().includes(keyword)
      )
    }
  },
  methods: {
    handleSearch(e) {
      console.log('搜索确认:', e.value)
    },
    handleInput(e) {
      console.log('输入内容:', e)
    },
    handleCancel(e) {
      console.log('取消搜索:', e.value)
      this.searchKeyword = ''
    },
    viewMemberDetail(member) {
      this.selectedMember = member
      this.$refs.detailPopup.open()
    },
    closeDetail() {
      this.$refs.detailPopup.close()
      this.selectedMember = null
    },
    onFabTrigger(e) {
      const { index, item } = e
      if (index === 0) { // 新增会员
        this.showAddPopup()
      }
    },
    showAddPopup() {
      this.resetNewMember()
      this.$refs.addPopup.open()
    },
    closeAddPopup() {
      this.$refs.addPopup.close()
    },
    onLevelChange(e) {
      const index = e.detail.value
      this.newMember.level = this.levelOptions[index]
    },
    saveMember() {
      if (!this.newMember.name || !this.newMember.phone) {
        uni.showToast({
          title: '请填写会员姓名和手机号码',
          icon: 'none'
        })
        return
      }

      const newMember = {
        id: Date.now(),
        name: this.newMember.name,
        phone: this.newMember.phone,
        level: this.newMember.level || '普通会员',
        points: Number(this.newMember.points) || 0,
        balance: Number(this.newMember.balance) || 0,
        avatar: '/static/logo.png',
        registerTime: new Date().toLocaleDateString()
      }

      this.members.unshift(newMember)
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      })

      this.closeAddPopup()
    },
    resetNewMember() {
      this.newMember = {
        name: '',
        phone: '',
        level: '',
        points: 0,
        balance: 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
.member-container {
  padding: 0;
  background-color: #f8f8f8;
  padding-bottom: 100px;
}

.search-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #fff;
  padding: 10rpx 0;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.member-list {
  padding: 20rpx;
}

.member-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .level, .points, .balance {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 8rpx;
  }

  .balance {
    color: #e64340;
    font-weight: bold;
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;

  .empty-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }

  .empty-subtext {
    font-size: 24rpx;
    color: #ccc;
    margin-top: 10rpx;
  }
}

.detail-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.detail-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;

  .detail-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .detail-name {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.detail-info {
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    .label {
      font-size: 28rpx;
      color: #666;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.detail-actions {
  margin-top: 40rpx;

  .action-btn {
    background: #007aff;
    color: #fff;
    border: none;
    border-radius: 10rpx;
    padding: 20rpx 0;
    font-size: 28rpx;
  }
}

.popup-content {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  width: 600rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.form-container {
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.input, .picker-value {
  width: 95%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background: #fff;
}

.picker-value {
  color: #333;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.btn-cancel, .btn-confirm {
  padding: 20rpx 40rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  border: none;
}

.btn-cancel {
  background: #f0f0f0;
  color: #666;
}

.btn-confirm {
  background: #007aff;
  color: #fff;
}
</style>